<template>
  <div>
    <sunDrawerBack :parent="this.$parent.$parent" show="show_editList" />
    <el-page-header class="sun-el-page-header" :content="name" @back="goBack" />
    <el-form ref="refForm" class="sun-el-form" :model="formData" style="padding: 14px;background: #FFFFFF">
      <span v-for="item in dataList" :key="item.key">
        <span v-if="item.type === 'input' || item.type === 'text' || item.type === 'number'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-input v-model="formData[item.key]" :disabled="item.key === 'key'" :type="item.type" :placeholder="item.describe" />
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
        <span v-if="item.type === 'select'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-select v-model="formData[item.key]" disabled :placeholder="item.describe || ''" @change="selectOption($event, item.key)">
              <el-option
                v-for="selectItem in item.options"
                :key="selectItem.key"
                :label="selectItem.name"
                :value="selectItem.key"
              />
            </el-select>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
          <span v-for="el in item.options" :key="el.key">
            <span v-if="el.key === formData[item.key]">
              <span v-for="e in el.attribute" :key="e.key">
                <el-form-item
                  :label="e.name"
                  :prop="e.key"
                >
                  <div v-if="e.key === 'exf'">
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.img_checkAll" label="图片类型" border size="mini" :indeterminate="isIndeterminate.img_isIndeterminate" @change="checkboxAll($event, 'img')" />
                      <el-checkbox-group v-model="obJexfValue.imgValue" @change="handleCheckedCitiesChange($event, 'img')">
                        <el-checkbox v-for="imgt in imgList" :key="imgt" :label="imgt">{{ imgt }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.video_checkAll" label="视频类型" border size="mini" :indeterminate="isIndeterminate.video_isIndeterminate" @change="checkboxAll($event, 'video')" />
                      <el-checkbox-group v-model="obJexfValue.videoValue" @change="handleCheckedCitiesChange($event, 'video')">
                        <el-checkbox v-for="mp in videoList" :key="mp" :label="mp">{{ mp }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.audio_checkAll" label="音频类型" border size="mini" :indeterminate="isIndeterminate.audio_isIndeterminate" @change="checkboxAll($event, 'audio')" />
                      <el-checkbox-group v-model="obJexfValue.audioValue" @change="handleCheckedCitiesChange($event, 'audio')">
                        <el-checkbox v-for="ao in audioList" :key="ao" :label="ao">{{ ao }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.file_checkAll" label="文档类型" border size="mini" :indeterminate="isIndeterminate.file_isIndeterminate" @change="checkboxAll($event, 'file')" />
                      <el-checkbox-group v-model="obJexfValue.fileValue" @change="handleCheckedCitiesChange($event, 'file')">
                        <el-checkbox v-for="ft in fileList" :key="ft" :label="ft">{{ ft }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.zip_checkAll" label="压缩类型" border size="mini" :indeterminate="isIndeterminate.zip_isIndeterminate" @change="checkboxAll($event, 'zip')" />
                      <el-checkbox-group v-model="obJexfValue.zipValue" @change="handleCheckedCitiesChange($event, 'zip')">
                        <el-checkbox v-for="zp in zipList" :key="zp" :label="zp">{{ zp }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div v-else>
                    <el-input v-model="el[item.key + '_' + el.key][e.key]" :min="e.type === 'number' || e.key === 'file_size' ? '0' : ''" :type="e.key === 'file_size' ? 'number' : e.type" :placeholder="e.describe" />
                    <span class="message">{{ item.describe || '' }}</span>
                  </div>
                </el-form-item>
              </span>
            </span>

          </span>
        </span>
        <span v-if="item.type === 'radio'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-radio v-model="formData[item.key]" :label="1">是</el-radio>
            <el-radio v-model="formData[item.key]" :label="0">否</el-radio>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
        <span v-if="item.type === 'checkBox'">
          <el-form-item
            v-if="item.options"
            :label="item.name"
            :prop="item.key"
          >
            <el-checkbox-group v-model="formData[item.key]" size="mini">
              <el-checkbox v-for="value_name in item.options" :key="value_name.id" :label="value_name.value" border>{{ value_name.name }}</el-checkbox>
            </el-checkbox-group>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
      </span>
    </el-form>
    <div style="padding: 14px;border-top: 1px solid #EBEEF5">
      <span class="dialog-footer">
        <el-button size="small" @click="goBack">取 消</el-button>
        <el-button type="primary" size="small" @click="onFinish">完 成</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import SunDrawerBack from '@/sun-components/SunDrawerBack'
export default {
  name: 'DataBankEditList',
  components: { SunDrawerBack },
  props: {
    formData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    obJexfValue: {
      type: Object,
      default: function() {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    },
    name: {
      type: String,
      default: '编辑'
    }
  },
  data() {
    return {
      select_options: [],
      imgList: ['.png', '.jpg', '.gif', '.jpeg', '.pic', '.tif', '.bmp'],
      videoList: ['.mp4', '.3gp', '.m4v', '.rmvb', '.avi', '.wmv'],
      audioList: ['.mp3', '.wma', '.wav', '.aif'],
      zipList: ['.rar', '.zip', '.7z'],
      fileList: ['.doc', '.pdf', '.docx'],
      isCheckAll: {
        img_checkAll: false,
        video_checkAll: false,
        audio_checkAll: false,
        zip_checkAll: false,
        file_checkAll: false
      },
      isIndeterminate: {
        img_isIndeterminate: false,
        video_isIndeterminate: false,
        audio_isIndeterminate: false,
        zip_isIndeterminate: false,
        file_isIndeterminate: false
      }
    }
  },
  computed: {
    show_editList() {
      return this.$parent.$parent.show_editList
    }
  },
  watch: {
    show_editList(value) {
      if (value) {
        this.defaultCheckbox()
      }
    }
  },
  created() {
    if (this.show_editList) {
      this.defaultCheckbox()
    }
  },
  methods: {
    async defaultCheckbox() {
      console.log('打开了', this.obJexfValue)
      if (Object.keys(this.obJexfValue).length === 0) return
      this.isCheckAll.img_checkAll = this.obJexfValue.imgValue.length === this.imgList.length
      this.isIndeterminate.img_isIndeterminate = this.obJexfValue.imgValue.length > 0 && this.obJexfValue.imgValue.length < this.imgList.length

      this.isCheckAll.video_checkAll = this.obJexfValue.videoValue.length === this.videoList.length
      this.isIndeterminate.video_isIndeterminate = this.obJexfValue.videoValue.length > 0 && this.obJexfValue.videoValue.length < this.videoList.length

      this.isCheckAll.file_checkAll = this.obJexfValue.fileValue.length === this.fileList.length
      this.isIndeterminate.file_isIndeterminate = this.obJexfValue.fileValue.length > 0 && this.obJexfValue.fileValue.length < this.fileList.length

      this.isCheckAll.audio_checkAll = this.obJexfValue.audioValue.length === this.audioList.length
      this.isIndeterminate.audio_isIndeterminate = this.obJexfValue.audioValue.length > 0 && this.obJexfValue.audioValue.length < this.audioList.length

      this.isCheckAll.zip_checkAll = this.obJexfValue.zipValue.length === this.zipList.length
      this.isIndeterminate.zip_isIndeterminate = this.obJexfValue.zipValue.length > 0 && this.obJexfValue.zipValue.length < this.zipList.length
    },
    async checkboxAll(e, type) {
      const parent = this.$parent.$parent
      switch (type) {
        case 'img':
          this.$set(parent.obJexfValue, 'imgValue', e ? this.imgList : [])
          this.isIndeterminate.img_isIndeterminate = false
          break
        case 'video':
          this.$set(parent.obJexfValue, 'videoValue', e ? this.videoList : [])
          this.isIndeterminate.video_isIndeterminate = false
          break
        case 'file':
          this.$set(parent.obJexfValue, 'fileValue', e ? this.fileList : [])
          this.isIndeterminate.file_isIndeterminate = false
          break
        case 'audio':
          this.$set(parent.obJexfValue, 'audioValue', e ? this.audioList : [])
          this.isIndeterminate.audio_isIndeterminate = false
          break
        case 'zip':
          this.$set(parent.obJexfValue, 'zipValue', e ? this.zipList : [])
          this.isIndeterminate.zip_isIndeterminate = false
          break
      }
    },
    async handleCheckedCitiesChange(value, type) {
      const checkedCount = value.length
      switch (type) {
        case 'img':
          this.isCheckAll.img_checkAll = checkedCount === this.imgList.length
          this.isIndeterminate.img_isIndeterminate = checkedCount > 0 && checkedCount < this.imgList.length
          break
        case 'video':
          this.isCheckAll.video_checkAll = checkedCount === this.videoList.length
          this.isIndeterminate.video_isIndeterminate = checkedCount > 0 && checkedCount < this.videoList.length
          break
        case 'file':
          this.isCheckAll.file_checkAll = checkedCount === this.fileList.length
          this.isIndeterminate.file_isIndeterminate = checkedCount > 0 && checkedCount < this.fileList.length
          break
        case 'audio':
          this.isCheckAll.audio_checkAll = checkedCount === this.audioList.length
          this.isIndeterminate.audio_isIndeterminate = checkedCount > 0 && checkedCount < this.audioList.length
          break
        case 'zip':
          this.isCheckAll.zip_checkAll = checkedCount === this.zipList.length
          this.isIndeterminate.zip_isIndeterminate = checkedCount > 0 && checkedCount < this.zipList.length
          break
      }
    },
    async selectOption(options_key, item_key) {
      this.dataList?.forEach((e1) => {
        if (e1.key === item_key) {
          e1.options?.forEach((e2) => {
            if (options_key === e2.key) {
              e2['checked'] = true
            } else {
              e2['checked'] = false
            }
          })
        }
      })
    },
    async goBack() {
      this.$parent.$parent.drawerClose('show_editList')
    },
    async onFinish() {
      const _that = this
      this.dataList?.forEach((e1) => {
        if (e1.key !== 'permission' && e1.options) {
          e1.options?.forEach((e2) => {
            if (e2.checked) {
              Object.assign(_that.formData, e2[e1.key + '_' + e2.key])
            }
          })
        }
      })
      _that.formData.exf = this.obJexfValue
      this.$parent.$parent.onFinish()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .message{
    color: #F56C6C;
    font-size: 8px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .sun-el-form ::v-deep {
    &.el-form-item__label{
      text-align: left;
      float: none;
    }
    &.el-checkbox:last-of-type{
      margin-right: 20px !important;
    }
  }
</style>
